{include file="header.html"}
<body class="gr">

<div class="navBar">
	<a class="left" href="wap.php"><i class="return"></i></a>
	<div class="titleView">休闲馆</div>
	<a class="right" href="javascript:void(0)">切换</a>
</div>

<div class="coffee-index width-wrap">
	<div class="pullRefresh">
		<ul class="list goods-item"></ul>
	</div>
	
	<div class="coffee-bottomView toolBar-black ge-top">
		<a class="btn" href="javascript:void(0)">选好了</a>
		<a class="cart badge" href="javascript:void(0)"><sub></sub></a>
		<div class="price">￥0.00</div>
	</div>
</div>

{include file="footer.html"}
<script type="text/javascript" src="js/city.js"></script>
<script>
var latitude = '', longitude = '', coffee_shop_id = '';
var offset = $('.pullRefresh .list > li').length;
function createHtml(g){
	var html = '<li>\
		<a href="wap.php?app=coffee&act=detail&coffee_id='+g.id+'&coffee_shop_id='+coffee_shop_id+'">\
			<div class="pic" style="background-image:url('+g.default_pic+');"></div>\
			<div class="title"><div>'+g.name+'</div><span><strong>￥</strong>'+g.price.numberFormat(2)+'</span></div>\
			<div class="plus" coffee_id="'+g.id+'">＋</div>\
		</a>\
	</li>';
	offset++;
	return html;
}
function pullRefresh(){
	$('.pullRefresh').pullRefresh({
		header : '<div class="preloader"></div>',
		footer : true,
		footerNoMoreText : '- END -',
		headerView : '<div class="headerView"></div>',
		scroll : function(headerView, headerViewHolder){
			var scrollTop = this.scrollTop(), height = headerViewHolder.height();
			if(scrollTop>=height-$('.navBar').height()){
				$('.navBar').removeClass('navBar-transparent');
				headerView.height(44);
			}else{
				$('.navBar').addClass('navBar-transparent');
				headerView.height(height-scrollTop);
			}
		},
		refresh : function(fn){
			var _this = this;
			offset = 0;
			if(coffee_shop_id.length){
				latitude = '';
				longitude = '';
			}
			$.getJSON('api.php?app=coffee&act=index&coffee_shop_id='+coffee_shop_id+'&latitude='+latitude+'&longitude='+longitude, function(json){
				if(json.error!=0){ $.overloadError(json.msg);return }
				var html = '';
				if($.isPlainObject(json.data.coffee_shop))coffee_shop_id = json.data.coffee_shop.shop_id;
				if($.isArray(json.data.coffees))for(var i=0; i<json.data.coffees.length; i++)html += createHtml(json.data.coffees[i]);
				_this.find('.list').html(html);
				setLists();
				fn();
			});
		},
		load : function(fn){
			var _this = this;
			$.getJSON('api.php?app=coffee&act=index&coffee_shop_id='+coffee_shop_id+'&latitude='+latitude+'&longitude='+longitude, { offset:offset }, function(json){
				if(json.error!=0){ $.overloadError(json.msg);return }
				var html = '';
				if($.isArray(json.data.coffees))for(var i=0; i<json.data.coffees.length; i++)html += createHtml(json.data.coffees[i]);
				_this.find('.list').append(html);
				setLists();
				fn();
			});
		}
	});
	$('.pullRefresh').pullRefresh('headerBegin');
}
function getCart(){
	$.getJSON('api.php?app=coffee_cart&act=cart_total', function(json){
		$('.badge sub').html(json.data.quantity>0?'<b>'+json.data.quantity+'</b>':'');
		$('.coffee-bottomView .price').html('￥'+json.data.total_price.numberFormat(2)).priceFont('bigPrice');
	});
}
function setLists(){
	var width = ($('.pullRefresh').width()-10*3) / 2;
	$('.goods-item li').width(width);
	$('.goods-item a .pic').loadbackground();
}
function changeCityCode(){
	$('tt').each(function(){
		var html = $(this).html();
		if(isNaN(html))return true;
		$(this).html(getCityName(html).replace(/市/g, ''));
	});
	$('span.address').each(function(){
		var _this = $(this), province = _this.attr('province'), city = _this.attr('city'), district = _this.attr('district'), address = _this.attr('address');
		_this.html(comboCity(province, city, district, address));
	});
}
setLists();
$(window).resize(setLists);
$(function(){
	$(document.body).data('no-overlay', true);
	$('.coffee-index').height($.window().height-$('.coffee-index').padding().bottom);
	$('.coffee-bottomView .price').priceFont('bigPrice');
	getCart();
	$(document).on('click', '.coffee-index .list a', function(e){
		var e = e||window.event, o = e.target||e.srcElement;
		if($(o).length && $(o).is('.plus')){
			var _this = $(o), coffees = [{ coffee_id:_this.attr('coffee_id'), quantity:1 }];
			$.overload(null);
			$.postJSON('api.php?app=coffee_cart&act=add_cart', { coffees:$.jsonString(coffees), coffee_shop_id:coffee_shop_id }, function(json){
				var dot = $('<div class="badge-dot"></div>'), sub = $('.badge sub'), height = sub.height(), offset = sub.offset(), scrollTop = $(window).scrollTop();
				dot.parabola({
					start : {
						left : _this.offset().left + _this.width()/2,
						top : _this.offset().top + _this.height()/2 - scrollTop,
						width : height,
						height : height
					},
					end : {
						left : offset.left,
						top : offset.top - scrollTop,
					},
					after : function(){
						sub.html(json.data.quantity>0?'<b>'+json.data.quantity+'</b>':'');
						$('.coffee-bottomView .price').html('￥'+json.data.total_price.numberFormat(2)).priceFont('bigPrice');
						this.remove();
					}
				});
			});
			return false;
		}
	});
	$('.navBar .right').click(function(){
		getShops(function(){
			bindFaceView(null, '.shop-index');
			$('.shop-index .list a').click(function(){
				var g = $(this).data('data');
				coffee_shop_id = g.id;
				$('.navBar:eq(0) .titleView').html($(this).data('title'));
				$('.headerView').css('background-image', 'url('+g.poster_pic+')').loadbackground();
				$('.pullRefresh').pullRefresh('headerBegin');
				setTitleView();
				removeFaceView();
			});
		});
	});
	$('.coffee-bottomView .btn, .coffee-bottomView .cart').click(function(){
		location.href = 'wap.php?app=coffee_cart&act=index&coffee_shop_id='+coffee_shop_id;
	});
	$.getBaiduLocation(function(geo){
		latitude = geo.latitude;
		longitude = geo.longitude;
		pullRefresh();
		$('.navBar').addClass('navBar-transparent');
	});
});

function getShops(fn){
	$.getJSON('api.php?app=shop&act=index&pagesize=100', function(json){
		if(json.error!=0){ $.overloadError(json.msg);return }
		if(!$.isArray(json.data)){ $.overloadError('当前没有任何门店');return }
		var html = '<div class="faceView gr">\
			<div class="navBar">\
				<a class="left" href="wap.php"><i class="return"></i></a>\
				<div class="titleView">选择门店</div>\
			</div>\
			<div class="shop-index main-padding-top">\
				<ul class="list">';
					for(var i=0; i<json.data.length; i++){
					var g = json.data[i];
					html += '<li>\
						<a class="scale" href="javascript:void(0)" mid="'+g.id+'">\
							<div class="view">\
								<div><tt>'+g.city+'</tt>-'+g.name+'</div>\
								<ul>\
									<li><i></i><span>'+g.mobile+'</span></li>\
									<li><i></i><span class="address" province="'+g.province+'" city="'+g.city+'" district="'+g.district+'" address="'+g.address+'"></span></li>\
								</ul>\
							</div>\
							<div class="pic" style="background-image:url('+g.poster_pic+');"></div>\
						</a>\
					</li>';
					}
				html += '</ul>\
			</div>\
		</div>';
		$('body').append(html);
		changeCityCode();
		$('.shop-index .list a').each(function(i){
			$(this).data('data', json.data[i]).data('title', getCityName(json.data[i].city).replace(/市/g, '')+'-'+json.data[i].name);
		});
		fn();
	});
}
</script>